<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>开发助手2.0</title>
    
    <!-- 支持IE11 ！！！ -->
	<!-- From https://cdn.polyfill.io/v3/url-builder/ -->
	<!--[if IE]>
	<![endif]-->
	<!-- <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
	<!-- <script src="https://polyfill.io/v3/polyfill.min.js"></script> -->
	<script type="text/javascript" src="./statics/lib/ie-fix/polyfill.min.js"></script>
	<script type="text/javascript" src="./statics/lib/ie-fix/browser.min.js"></script>
    
    <!-- 导入vue相关库 -->
	<!-- <script type="text/javascript" src="./statics/lib/vue/vue.js"></script> -->
	<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <!-- 导入zepto/jquery 导入其中一个即可，两个库几乎拥有相同的Api -->
	<script type="text/javascript" src="./statics/lib/jquery.min.js"></script>

    <script type="text/javascript" src="./js/app/UrlParser.js"></script>
    <script type="text/javascript" src="./js/Counter.js"></script>
	<script type="text/javascript" src="./statics/lib/vue/vue2.6.js"></script>
	<script type="text/javascript" src="./statics/lib/vue/vue-router.js"></script>    
    <script type="text/javascript" src="./statics/lib/vue/httpVuePlus.js"></script>
    <script type="text/javascript" src="./statics/lib/vue/httpVueLoader2.js"></script>
    <script type="text/javascript" src="./statics/lib/vue/vue-easy.js"></script>
    <script type="text/javascript" src="./statics/lib/vue/less.min.js"></script>


	<!-- <link rel="stylesheet" href="./statics/lib/iview2/styles/iview.css">
    <script type="text/javascript" src="./statics/lib/iview2/iview.min.js"></script> -->
    
    <link rel="stylesheet" type="text/css" href="./statics/style/pure.css">
	<link rel="stylesheet" type="text/css" href="./statics/style/pure-extend.css">

	<!-- 引入element-ui -->
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
	<link rel="stylesheet" href="./statics/lib/element-ui/index.css">
	<link rel="stylesheet" href="./statics/lib/element-ui/display.css">
	<!-- 引入组件库 -->
    <script src="./statics/lib/element-ui/index.js"></script>
    
    <script type="text/javascript" src="./statics/lib/md5.js"></script>
    <script type="text/javascript" src="./statics/lib/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="./statics/lib/swallow.js"></script>
	
	<!-- 引入其他组件 TODO 仅在operation打开时引入！ -->
	<script type="text/javascript" src="./statics/lib/difflib/difflib.js"></script>
	<script type="text/javascript" src="./statics/lib/difflib/diffview.js"></script>
	<link rel="stylesheet" type="text/css" href="./statics/lib/difflib/diffview.css">

    <!-- 通过版本控制缓存更新 -->
    <!-- <#assign version = version> -->
	
	<!-- 自定义js或css引入 -->
	<link rel="stylesheet" href="./statics/css/page.css?version=${version}">
	<script type="text/babel" src="./js/UI.js?version=${version}"></script>
	<script type="text/babel" src="./js/Core.js?version=${version}"></script>
	<script type="text/babel" src="./js/Util.js?version=${version}"></script>
	<script type="text/babel" src="./js/Router.js?version=${version}"></script>
	<script type="text/babel" src="./js/Constants.js?version=${version}"></script>
    <!-- <script type="text/babel" src="./js/Page.js?version=${version}"></script> -->
    
    <!-- 自定义工具类 -->
	<script type="text/javascript" src="./js/app/Util.js"></script>
    <script type="text/javascript" src="./js/MyUtil.js"></script>
	<script type="text/javascript" src="./js/app/Map.js"></script>
	<script type="text/javascript" src="./js/app/Tools.js"></script>
	
	<script type="text/javascript" src="./js/app/cmpt-manager.js"></script>
	<script type="text/javascript" src="./js/app/Debug.js"></script>
	<script type="text/javascript" src="./js/app/Http.js"></script>

	<!-- 配置文件类 -->
	<script type="text/javascript" src="./js/app/Config.js"></script>

</head>

<body>
<div id="root" style="height: 100%;">
    <el-container v-show="init" style="display: none; height: 100%; background-color: bisque;">
        <el-header style="background-color: #4678c6; height: 80px;">
            <div class="header">
                
                <div style="float: left;">
                    <div style="float: left; margin: 15px 0 0 10px;"><img src="./statics/images/logo.png">
                    </div>
                    <div class="hidden-xs-only" style="float:left; margin:8px 0 0 40px;  color:white; ">
                        <h3>开发助手</h3>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div style="float: right; height: 70px;">
                    <div class="head-button" style="width:200px; color:white; margin-top:30px;">
                        <span>
                            <a @click="updatePassword()">
                                <i class="el-icon-lock"></i>
                                <span>修改密码</span>
                            </a>
                        </span>
                        
                        <span style="margin-left: 10px;">
                            <a @click="logout()">
                                <i class="el-icon-switch-button"></i>
                                <span>退出</span>
                            </a>
                        </span>
                        <div style="clear:both;"></div>
                    </div>
                </div>
            </div>
        </el-header>
        <el-container style="background-color: azure; height: 100%; overflow: hidden;">
            <el-aside :width="asideWidth" class="aside">
                <div class="image-div">
                    <img class="sidebar-wrapper-bg" src="./statics/images/nav-bg.png" alt="">
                </div>
                <el-menu ref="menu" :default-active="defaultActive" :collapse-transition="false"
                    unique-opened @select="selectMenu" :collapse="isCollapse"
                    style="height: 100%; background-color: rgb(71, 120, 199);">

                    <template v-for="(menu, i) in menus">
                        <el-submenu :index="getIndex(menu.id)">
                            <template slot="title">
                                <i style="color:white;" :class="getMenuClass(menu.text)"></i>
                                <span>{{menu.text}}</span>
                            </template>

                            <template v-for="(child, i2) in menu.children">
                                <el-menu-item :index="getIndex(child.id)">{{child.text}}</el-menu-item>
                            </template>
                            
                        </el-submenu>    
                        
                    </template>
                </el-menu>
            </el-aside>
            <el-container style="height: 100%; ">
                <el-header style="padding:0px; height: 40px;">
                    <cc-tag-group ref="tag" :data="tags" v-model="activeTag" @tag-change="tagChange"></cc-tag-group>
                </el-header>
                
                <el-main element-loading-text="页面加载中"
                    style="min-width:600px;height:100%;background-color: white; padding:0px 10px;" v-loading="false">
                    
                        <keep-alive exclude="app-page">
                            <router-view></router-view>
                        </keep-alive>

                </el-main>
                <!-- <el-footer>Footer</el-footer> -->
            </el-container>
        </el-container>
    </el-container>
</div>
</body>

<script type="text/babel">
var router = new VueRouter({
    routes : window.routers
}); 

window.$router = router;

window.App = Vue.init({

    data: function() {
        return {
            init: false,
            isCollapse: true,
            initPage: false,
            tags: [ '主页' ],
            defaultActive: null,
            activeTag: '主页',
            showCloseTagMenu: false,
            menus: []
        }
    },
    router : router,
    created: function() {
        console.log("vue created");

        // this.initMenuData();
        this.initMenuLocal();
        // 获取当前选择项
        console.log('path', this.$route );

        // 获取当前选择项
        var module = this.getModuleByHref();
        var menu = this.searchByModule(module)
        setTimeout(() => {
            this.openPage(menu);
        }, 100);

        window.Index = this;
    },
    mounted: function() {
        this.init = true;
        // 刷新初始化路由
        // this.$router.push({
        //     path: '/'
        // });
    },
    computed: {
        asideWidth: function() {
            if(this.isCollapse) {
                return "auto";
            } else {
                return "230px";
            }
        }
    },
    methods: {
        setCollapse: function(bool) {
            this.isCollapse = true;
        },
        initMenuLocal: function() {
            this.menus = [
                {
                    attributes: { url : 'testUrl' },
                    id: 2,
                    text: '开发平台',
                    children: [
                        {
                            attributes: { url : 'no-builer' },
                            id: 21,
                            text: '号码生成器'
                        },
                        {
                            attributes: { url : 'api' },
                            id: 22,
                            text: '接口测试'
                        },
                        {
                            attributes: { url : 'url-decode' },
                            id: 23,
                            text: 'url解码'
                        },
                        {
                            attributes: { url : 'url2qr' },
                            id: 24,
                            text: 'url转二维码'
                        },
                    ]
                },
            ];
            window.menus = this.menus;
        },
        showTag: function(tag) {
            this.$refs.tag.activeTag(tag);
            if(tag == '主页') {
                // this.isCollapse = true;
                this.setCollapse(true);
            } else {
                // this.isCollapse = false;
                this.setCollapse(false);
            }
        },
        fromIcon: function(name) {
            this.tagChange(name);
        },
        tagChange: function(tag) {
            console.log('tagChange', tag);
            if(tag == '主页') {
                // this.isCollapse = true;
                this.setCollapse(true);
                this.defaultActive = '';
                this.selectMainPage(tag);
            } else {
                // this.isCollapse = false;
                this.setCollapse(false);
                this.selectMenuByTag(tag);
            }
        },
        // 同步到菜单
        syncToMenu: function(menu, subMenu) {
            console.log('subMenu', subMenu.id);
            // 只能流入
            this.defaultActive = String( subMenu.id );
        },
        initMenuData: function () {
            // console.log('initMenuData');
            $.postc('menu/ctrlTree', {}, (result) => {
                // console.log("menu/ctrlTree", result);
                // console.log("result2", result);
                if(result == false || result.status == "failure") {
                    // console.log("result.msg", result.msg);
                    if(result.msg == '用户未登录') {
                        location.href = '../login.html';
                    }
                }
                this.menus = result;
            
            }, 'json');
        },
        getIndex: function(id) {
            return String(id);
        },
        getMenuClass: function(text) {
            // console.log('text',text);
            if('支付平台' == text) {
                return 'el-icon-s-tools';
            } else if('日志查询' == text) {
                return 'el-icon-search';
            } else if('业务管理' == text) {
                return 'el-icon-s-grid';
            } else if('废弃' == text) {
                return 'el-icon-delete-solid';
            } else {
                return 'el-icon-s-grid';
            }
        },
        openPage: function(menu) {
            // console.log('menu', menu);
            // this.openPage(menu);
            if(menu == null) {
                console.log('打开了一个空menu', menu);
                return;
            }
            this.showTag(menu.text);
            // this.activeTagPage = menu;
            var url = menu.attributes.url;
            var module = url.split("/")[0];
            this.$router.push({
                path: '/' + module
            });
        },
        selectMainPage: function() {
            this.$router.push({
                path: '/' 
            });
        },
        selectMenuByTag: function(tag) {
            for(var i in this.menus) {
                var menu = this.menus[i];
                var child = menu.children;
                for(var j in child) {
                    var subMenu = child[j];
                    if(subMenu.text == tag) {
                        this.openPage(subMenu);
                        this.syncToMenu(menu, subMenu);
                        return;
                    }
                }
            }
        },
        selectMenu: function(index, indexPath) {
            // console.log('index', index, indexPath);
            for(var i in this.menus) {
                var menu = this.menus[i];
                var child = menu.children;
                for(var j in child) {
                    var subMenu = child[j];
                    if(String(subMenu.id) == index) {
                        this.openPage(subMenu);
                        return;
                    }
                }
            }
        },
        logout: function () {
            $.post('user/logout', null, function(result) {
                if(result != false) {
                    location.href = '../login.html';
                }
            });
        },
        getModuleByHref: function() {
            var href = location.href;
            return href.split("#/")[1];
        },
        searchByModule: function(m) {
            for(var i in this.menus) {
                var menu = this.menus[i];
                var child = menu.children;
                for(var j in child) {
                    var subMenu = child[j];
                    var url = subMenu.attributes.url;
                    var module = url.split("/")[0];
                    if(module == m) {
                        return subMenu;
                    }
                }
            }
        },
    }

});
</script>

<style>
    body,html {
        height:100%;
    }
    #root .is-active {
        /* background-color: #87b4fc; */
        background-color: rgb(72, 137, 241);
        color: #fff;
    }
    #root .el-submenu__title i {
        color: white;
    }
    #root .el-submenu {
        color: white;
    }
    #root .el-submenu .el-menu-item {
        min-width: 150px;
    }
    .el-submenu__title {
        color: white;
        background-color: rgb(71, 120, 199);
    }
    .el-menu {
        color: white;
        /* background-color: rgb(71, 120, 199); */
        background-color: rgb(43, 104, 202); /*深色*/
    }
    .el-menu-item {
        color: white;
    }
    
    .el-menu-item:focus, .el-menu-item:hover, .el-submenu__title:hover {
        /* background-color: rgb(85, 136, 219); */
        background-color: rgb(72, 137, 241);
    }
    .aside {
        overflow-x: hidden;
        border-top: 1px solid #6399f0; position: relative;
    }
    .image-div {
        height: 100%;
        pointer-events: none;
        position: absolute;
        top:0px; z-index: 100;
        overflow: hidden;
    }
    .sidebar-wrapper-bg {
        width:228px;
        height: 100%;
        opacity: 0.8;
    }
    .el-main {
        padding:0px;
    }

    .tag-icon {
        font-size:25px; line-height: 40px;
    }
    .head-button a {
        cursor: pointer;
    }
    .head-button span {
        padding: 5px;
        border-radius: 10%;
    }
    .head-button span:hover {
        background-color: #2662c4;
        cursor: pointer;
    }
</style>

</html>